/**
 * Created by nyf on 2017/8/23.
 */
import React, { Component } from 'react';
import ReactEcharts from 'echarts-for-react';
const labelTop = {
    normal : {
        label : {
            show : true,
            position : 'center',
            formatter : '{b}\n',
            textStyle: {
                baseline : 'top',
                fontSize: 14,
                color: '#B7B7B7',
            }
        },
        labelLine : {
            show : false
        }
    }
};

let labelBottom = {
    normal : {
        color: '#f1f1f1',
        label : {
            show : true,
            position : 'center',
            textStyle:{
                color:'#000',
                fontSize: 16,
                lineHeight: 48,
            }
        },
        labelLine : {
            show : false
        }
    },
    emphasis: {
        color: 'rgba(0,0,0,0.1)'
    }
};
const radiusDe = ['50%','70%'];

class EchartsPie extends Component {
    render() {
        let {color,name,number,otherNumber,width,height,radius = radiusDe} = this.props;
        const option = {
            title: {
                subtext: name,
                x:'center'
            },
            toolbox: {
                show : true,
                feature : {
                    magicType : {
                        show: true,
                        type: ['pie', 'funnel'],
                        option: {
                            funnel: {
                                width: '20%',
                                height: '30%',
                                itemStyle : {
                                    normal : {
                                        label : {
                                            formatter : function (params){
                                                return '其他\n' + params.value + '%\n'
                                            },
                                            textStyle: {
                                                baseline : 'middle'
                                            }
                                        }
                                    },
                                }
                            }
                        }
                    }
                }
            },
            series : [
                {
                    type : 'pie',
                    center: ['50%', '50%'],
                    hoverAnimation: true,
                    radius : radius,
                    x: '0%', // for funnel
                    clockwise: true,
                    itemStyle : {
                        normal : {
                            color: color,
                            label : {
                                formatter : function (params){
                                    return (100 - params.percent).toFixed(2) + '%'
                                },
                                textStyle: {
                                    baseline : 'top'
                                }
                            }
                        }
                    },
                    data : [
                        {name:name, value:number,itemStyle : labelTop},
                        {name:'other', value:otherNumber, itemStyle : labelBottom}
                    ]
                }
            ]
        };
        return (
            <ReactEcharts
                option={option}
                style={{height: height, width: width}}
                className={'react_for_echarts'}
            />
        )
    }
}
export default EchartsPie;